<!-- 问题详情 -->
<template>
	<view class="content">
		<!-- 问题详情 -->
		<view class="top">
			<view class="head_content">
				<view class="head_img">
					<image :src="Data.qheadPhoto" :data-src="url"></image>
				</view>
				<view class="text">
					<view class="name">王亮老师</view>
					<view class="label">
						<view class="label_time">{{getReply}}</view>
						<view class="label_text" style="color:#FF9900;" v-if="Data.qheadPhoto==2">向你发出问答</view>
						<view class="label_text" v-else>你对老师发起问答</view>
					</view>
				</view>
			</view>
			<view class="essay">
				<view class="essay_content">
					{{Data.questionContent}}
				</view>
				<view class="essay_time">{{Data.crTime}}</view>
			</view>
		</view>
		<view style="height: 290upx;"></view>
		<!-- 回复 -->
		<view class="list">
			<view class="bottom_item" v-if="item.answerContent" v-for="(item,index) in Data.answers" :key="index">
				<view class="title" v-if="item.auserType==1">
					<view class="br"></view>
					我的回答：
				</view>
				<view class="title" v-else>
					<view class="br"></view>
					老师回复：
				</view>
				<view class="essay">
					<view class="essay_content">
						{{item.answerContent}}
					</view>
					<view class="essay_bottom">
						<view class="essay_time">{{item.answerTime}}</view>
						<view @click="gotoList(index)" class="btnList">{{item.answersNum}}条回复</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.defimg,
				questionsId: '',
				select_id: '',
				Data: '',
				courseKey: '',
				currentChild:''
			}
		},
		onLoad(e) {
			this.questionsId = e.questionsId;
			this.courseKey = e.courseKey;
			this.currentChild = uni.getStorageSync('currentChild');
		},
		onShow() {
			this.getData();	
		},
		methods: {
			getData: function() {
				var data = {
					stuId: this.currentChild.student_id,
					questionId: this.questionsId,
					reqMethod: 2
				};
				this.$capi.apiPost('question/selQuestionById', data).then(res => {
					var Data = res.data;
					if (Data.code == 200) {
						this.Data = Data.data;
					} else {
						uni.showToast({
							title: Data.msg,
							icon: 'none'
						});
					}
				});
			},
			gotoList: function(index) {
				var data = this.Data.answers[index];
				uni.navigateTo({
					url: 'essayLists?courseKey=' + this.courseKey + '&data=' + encodeURIComponent(JSON.stringify(data))
				});

			}
		
		},
		computed: {
			// 从返回过来的创建时间后面的时间来作为回复时间
			getReply() {
				return this.Data.crTime.match(/\d+:\d+/g).toString()
			}
		}
	}
</script>

<style lang="scss">
	.content {
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(250, 250, 250, 1);
	}

	.top {
		top: 0upx;
		position: fixed;
		z-index: 999;
		width: 100%;
		background: rgba(255, 255, 255, 1);

		.head_content {
			display: flex;
			justify-content: flex-start;
			margin: auto;
			border-bottom: 2upx solid rgba(229, 229, 229, 1);
			width: 92%;
			height: 140upx;
			align-items: center;

			.head_img {
				width: 88upx;
				height: 88upx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.text {
				display: flex;
				flex-direction: column;
				margin-left: 15upx;

				.name {
					color: #333333;
					font-size: 34upx;
				}

				.label {
					display: flex;
					justify-content: flex-start;

					.label_time {
						color: #999999;
						font-size: 26upx;
						margin-right: 10upx;
					}

					.label_text {
						color: #00D5A2;
						font-size: 26upx;
					}
				}
			}
		}

		.essay {
			width: 92%;
			margin: auto;
			display: flex;
			flex-direction: column;

			.essay_content {
				width: 100%;
				line-height: 44upx;
				color: rgba(51, 51, 51, 1);
				font-size: 34upx;
				margin-top: 15upx;
				margin-bottom: 20upx;
			}

			.essay_time {
				height: 50upx;
				font-size: 26upx;
				line-height: 40upx;
				color: #C2C2C2;
			}
		}
	}

	.list {
		background: rgba(250, 250, 250, 1);
		.bottom_item {
			display: flex;
			width: 100%;
			background: #FFFFFF;
			flex-direction: column;
			justify-content: center;
			margin-bottom: 20upx;

			.title {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 92%;
				margin: auto;
				height: 76upx;
				color: #000000;
				font-size: 36upx;
				font-weight: 500;

				.br {
					margin-right: 10upx;
					width: 6upx;
					height: 34upx;
					background: rgba(0, 213, 162, 1);
				}

			}

			.essay {
				width: 92%;
				margin: auto;
				display: flex;
				flex-direction: column;

				.essay_content {
					width: 100%;
					line-height: 44upx;
					color: rgba(51, 51, 51, 1);
					font-size: 34upx;
					margin-top: 15upx;
					margin-bottom: 20upx;
				}

				.essay_bottom {
					display: flex;
					justify-content: flex-start;

					.essay_time {
						height: 50upx;
						font-size: 26upx;
						line-height: 40upx;
						color: #C2C2C2;
					}

					.btnList {
						width: 120upx;
						height: 40upx;
						margin-left: 40upx;
						background: rgba(242, 242, 242, 1);
						border-radius: 20upx;
						color: rgba(153, 153, 153, 1);
						font-size: 26upx;
						text-align: center;
						line-height: 40upx;
					}
				}
			}

		}
	}

	.btn {
		width: 100%;
		height: 120upx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;

		.btn_content {
			margin: auto;
			width: 92%;
			height: 80upx;
			background: rgba(0, 213, 162, 1);
			border-radius: 8upx;
			text-align: center;
			line-height: 80upx;
			font-size: 34upx;
			color: #FFFFFF;
		}
	}

	// .scroll {
	// 	margin-top: 20upx;
	// 	width: 100%;
	// 	height: 765upx;
	// }
</style>
